/*----------------------------------------------------
 * reset
 *---------------------------------------------------*/
html, body { height: 100%; -webkit-user-select: none; user-select: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); -ms-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0);overflow-x:hidden; }
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, form, fieldset, input, label { margin: 0; padding: 0; font-weight: normal; }
body { font-size: 0.32rem; -webkit-text-size-adjust: none; font-family:-apple-system,'San Francisco','PingFang SC','Helvetica Neue',Arial; color: #333; background: #f4f4f4;}
a { text-decoration: none; }
em, i, s { font-style: normal; }
ul, li { list-style: none; }
table { border-collapse: collapse; }
td { empty-cells: show; }
button { border: 0; }
i, cite { font-style: normal; }
input[type="text"], input[type="number"], input[type="password"] { -webkit-appearance: none; }
/*------------------ Fluidity response ------------------------------*/
img, canvas, iframe, video, svg { max-width: 100%; height: auto }
/*------------------ clear ------------------------------*/
.clear { height: 0; font-size: 0; line-height: 0; overflow: hidden; clear: both; }
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1;
}
/*----------------------------------------------------
 * common
 *---------------------------------------------------*/
 html,body{width:100%;max-width:100%;overflow-x:hidden;}
/**
 * float
 */
.fl { float: left; }
.fr { float: right; }
/**
 * font family
 */
.font-base{font-family:-apple-system,'San Francisco', "Helvetica Neue", Helvetica;}
.font-hei{font-family:-apple-system,'Microsoft YaHei','Microsoft JhengHei',STHeiti,SimHei,Arial;}
/**
 * font size
 */
.f22{font-size: 0.293333rem}
.f24{font-size: 0.32rem}
.f26{font-size: 0.346667rem}
.f28{font-size: 0.373333rem}
.f30{font-size: 0.4rem}
.f32{font-size: 0.426667rem}
.f36{font-size: 0.48rem}
/**
 * font weight
 */
.bold{font-weight: 700;}
/**
 * text align
 */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/**
 * background
 */
.bg-red{background-color: #ea2f2a}
/**
 * color
 */
.white{color:#fff;}
.dark{color:#333}
.red { color: #f63f3f; }
.red-dark{color:#9f1410;}
.orange{color:#ffba00}
.gray{ color: #666; }
/**
 * display
 */
.hide{display:none}
.block{display:block}
.inline{display:inline}
.inline-block{display:inline-block;}
/**
 * display table
 */
.table {display: table;width: 100%;}
.table-row{display:table-row;overflow:hidden;}
.table-cell{display:table-cell;*float:left;vertical-align: middle;}
.table-cell.text-top{vertical-align: top}
/**
 * box-shadow
 */
.box-shadow-none {box-shadow: 0 0 0 rgba(0, 0, 0, 0.5)}
.box-shadow-small {box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5)}
.box-shadow {box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5)}
.box-shadow-big {box-shadow: 0 6px 9px rgba(0, 0, 0, 0.5)}
/**
 * z-index
 */
.z-max{z-index: 99999}
.z-min{z-index: 0}
.z-1x{z-index: 9}
.z-2x{z-index: 19}
.z-3x{z-index: 29}
.z-4x{z-index: 39}
/*----------------------------------------------------
 * page
 *---------------------------------------------------*/
.wrap{width:100%;max-width:100%;overflow-x:hidden;}
.main{position:relative;padding-bottom: 0.35rem;}
.container{padding-left: 0.5rem;padding-right: 0.5rem;}
.slogan{
 	position:relative;
 	z-index: 10;
}
.slogan-img{
 	margin: 0 auto;
 	background:url("../image/slogan-with-logo.png") center no-repeat;
 	background-size: 100%;
 	width:9.106667rem;
 	height:4.68rem;
}
.btn-orange{
	display:inline-block;
	width:7.253333rem;
	height:1.613333rem;
	line-height: 1.45rem;
	background:url("../image/btn-orange.png") center no-repeat;
 	background-size: 100%;
 	color:#fe4b2d;
 	font-size: 0.586667rem;
 	font-weight: bolder;
}


/*----------------------------------------------------
 * animate
 *---------------------------------------------------*/
.main53d {
	-webkit-transition: All 1s 0s;
	-moz-transition: All 1s 0s;
	-ms-transition: All 1s 0s;
	margin-top: -3.8rem;
	height: 12.133333rem;
	position:relative;
}

.main53d ul {
	margin: 0;
	padding: 0;
	position:relative;
	-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	-moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	-ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}

.main53d ul li {
	list-style: none;
	position: absolute;
	width: 12.133333rem;
	height: 12.133333rem;
	left: 50%;
	top: 100%;
	margin-left: -6.066667rem;
	text-align: center;
}

.main53d li.golden{
	position:absolute;
	width:100%;
	left:0;
	right:0;
	top:-1.25rem;
	margin-left: auto;
	pointer-events: none;
}

.main53d ul li.fadein {
	-webkit-transition: All 1.2s 0s;
	-moz-transition: All 1.2s 0s;
	-ms-transition: All 1.2s 0s;
	transition: All 1.2s 0s;
	-webkit-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	-moz-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	-ms-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}

.main53d ul li.fadein img {
	-webkit-animation: 5s ease;
    -moz-animation: 5s ease;
    -ms-animation: 5s ease;
    animation: 5s ease;
	-webkit-animation-name: a-bouncein;
    -moz-animation-name: a-bouncein;
    -ms-animation-name: a-bouncein;
    animation-name: a-bouncein
}

.main53d ul li.sk-bounce {
	-webkit-animation: sk-bounce 4.0s infinite ease-in-out;
	-moz-transform: sk-bounce 4.0s infinite ease-in-out;
  	-ms-transform: sk-bounce 4.0s infinite ease-in-out;
  	animation: sk-bounce 4.0s infinite ease-in-out;
}

.main53d ul li.rotate {
	-webkit-animation: z 10s linear 0s infinite;
	-moz-animation: z 10s linear 0s infinite;
	-ms-animation: z 10s linear 0s infinite;
	animation: z 10s linear 0s infinite;
}

.qrcode{vertical-align:middle;}
.qrcode img{
	width:3.626667rem;
	height:3.626667rem;
	vertical-align:middle;
	border:3px solid #ea2f2a;
	border-radius:3px;
}

@-webkit-keyframes z {
	from {
		-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
		-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
		-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
		transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	}
	to {
		-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
		-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
		-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
		transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
	}
}

@-webkit-keyframes y {
	from {
		-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
		-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
		-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
		transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
	}
	to {
		-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);
		-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);
		-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);
		transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);
	}
}


@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.8) }
  50% { -webkit-transform: scale(1.1) }
}

@-moz-keyframes sk-bounce {
  0%, 100% { -moz-transform: scale(0.8) }
  50% { -moz-transform: scale(1.1) }
}

@-ms-keyframes sk-bounce {
  0%, 100% { -moz-transform: scale(0.8) }
  50% { -moz-transform: scale(1.1) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  } 50% { 
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}


@-webkit-keyframes a-bouncein {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(0.9)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes a-bouncein {
    0% {
        opacity: 0;
        -moz-transform: scale(0.3)
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.05)
    }
    70% {
        -moz-transform: scale(0.9)
    }
    100% {
        -moz-transform: scale(1)
    }
}

@-ms-keyframes a-bouncein {
    0% {
        opacity: 0;
        -ms-transform: scale(0.3)
    }
    50% {
        opacity: 1;
        -ms-transform: scale(1.05)
    }
    70% {
        -ms-transform: scale(0.9)
    }
    100% {
        -ms-transform: scale(1)
    }
}

@keyframes a-bouncein {
    0% {
        opacity: 0;
        transform: scale(0.3)
    }
    50% {
        opacity: 1;
        transform: scale(1.05)
    }
    70% {
        transform: scale(0.9)
    }
    100% {
        transform: scale(1)
    }
}

/**
 * 金币掉落
 */

#leaveContainer {
    position: fixed;
    top: 0;
    z-index: 1;
    min-height: 100%;
    width: 100%;
    /*overflow: hidden;*/
    pointer-events: none;
  }
  
  #leaveContainer >div {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
  }
  
  #leaveContainer > div > img {
    position: absolute;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% -100%;
  }
  
  @-webkit-keyframes fade {
    0% {
      opacity: 1;
    }
    95% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes drop {
    0% {
      -webkit-transform: translate(0px, -50px);
    }
    100% {
      -webkit-transform: translate(0px, 800px);
    }
    /*这里的数字可以自行修改*/
  }
  
  @-webkit-keyframes leaveRotate {
    0% {
      -webkit-transform: rotate(-50deg);
    }
    100% {
      -webkit-transform: rotate(50deg);
    }
  }
  
  @-webkit-keyframes leaveRotateAndScale {
    0% {
      -webkit-transform: scale(-1, 1) rotate(50deg);
    }
    100% {
      -webkit-transform: scale(-1, 1) rotate(-50deg);
    }
  }

.fadein-top,.fadein-bottom {
    -webkit-animation: 1s ease-out backwards;
    -moz-animation: 1s ease-out backwards;
    -ms-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards
}

.fadein-top-2s,.fadein-bottom-2s {
    -webkit-animation: 2s ease-out backwards;
    -moz-animation: 2s ease-out backwards;
    -ms-animation: 2s ease-out backwards;
    animation: 2s ease-out backwards
}

.fadein-top-3s,.fadein-bottom-3s {
    -webkit-animation: 3s ease-out backwards;
    -moz-animation: 3s ease-out backwards;
    -ms-animation: 3s ease-out backwards;
    animation: 3s ease-out backwards
}

.fadein-top-4s,.fadein-bottom-4s {
    -webkit-animation: 4s ease-out backwards;
    -moz-animation: 4s ease-out backwards;
    -ms-animation: 4s ease-out backwards;
    animation: 4s ease-out backwards
}

.fadein-top-5s,.fadein-bottom-5s {
    -webkit-animation: 5s ease-out backwards;
    -moz-animation: 5s ease-out backwards;
    -ms-animation: 5s ease-out backwards;
    animation: 5s ease-out backwards
}

.fadein-top,.fadein-top-2s,.fadein-top-3s,.fadein-top-4s,.fadein-top-5s {
    -webkit-animation-name: fadeinT;
    -moz-animation-name: fadeinT;
    -ms-animation-name: fadeinT;
    animation-name: fadeinT
}

@-webkit-keyframes fadeinT {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinT {
    0% {
        opacity: 0;
        -moz-transform: translateY(-50px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinT {
    0% {
        opacity: 0;
        -ms-transform: translateY(-50px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinT {
    0% {
        opacity: 0;
        transform: translateY(-50px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadein-bottom,.fadein-bottom-2s,.fadein-bottom-3s,.fadein-bottom-4s,.fadein-bottom-5s {
    -webkit-animation-name: fadeinB;
    -moz-animation-name: fadeinB;
    -ms-animation-name: fadeinB;
    animation-name: fadeinB
}

@-webkit-keyframes fadeinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(50px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(50px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}